<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>
<head>
<title>用户管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/commons/meta.jsp"%>
<%@ include file="/commons/easyUI.jsp" %>
<script type="text/javascript">
	var url;
	/**当前的tab 是否存在如果存在就 自动选择 否则 创建新的tab**/
	function openTab(text,url,iconCls){
		if($("#tabs").tabs("exists",text)){
			$("#tabs").tabs("select",text);
		}else{
		 /**添加一个tab标签**/
			var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%'  src='"+url+"'></iframe>";
			$("#tabs").tabs("add",{
				title:text,
				iconCls:iconCls,
				closable:true, //设置选项卡是否可以关闭 ，默认为false
				content:content
			});
		}
	}
	
	function logout(){
		location.href="${pageContext.request.contextPath}/user_logout.action";
	}
</script>
	
  </head>
  
<!--   使用easyUI基本布局 
在整个页面上创建布局（Layout）
fit-----当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸
-->
  <body class="easyui-layout" data-options="fit:true">
  
<!--   collapsible boolean 定义是否显示可折叠按钮。 
href string 从远程站点加载数据的 URL 。 
iconCls string 在面板（panel）头部显示一个图标的 CSS class。 
split boolean 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸 
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 
 -->
 
 
 
 
 <!--  北边的布局：头 -->
   	<div data-options="region:'north',split:false" style="height:100px;background-color: #35517D">
   		<div style="float:left;">
   			<img src="./pic/logo.png" style="position: relative; left: 10px; top: 5px;">
   			<span style="color: white;font-size: 20px; position:absolute; left:50px; top: 10px;">OA办公自动化管理系统</span>
   		</div>
   		
   		<div align="right" style=" color: white;font-size: 20px; position: relative; top: 10px;">
   			<span >欢迎 </span><span style="font-family: 微软雅黑; color: black">${currentUser.name}</span> <span style="color:blue; margin-left: 10px" id="logout" onclick="logout()">退出登录</span></span> 			
   		</div>
   	</div>
   
  <!--  西边的布局 :导航菜单-->
   	<div data-options="region:'west',split:true" title="导航菜单"  style="width: 150px;">
   		<div class="easyui-accordion" data-options="fit:'true'" style="height: auto;">
   			<c:forEach items="${oneCategory}" var="one" varStatus="onestate">
   				<div title="${one.name }" data-options="selected:true,iconCls:'icon-user'"  style="overflow: auto; padding: 10px;">
   					<c:forEach items="${one.twoCategories}" var="two" varStatus="twostate">
   						<div style="padding:3px 0;">
   			 				<a href="javascript:openTab('${two.name }','${two.url }','icon-user')"  class="easyui-linkbutton"  data-options="plain:true,iconCls:'icon-manage'" style="width: 150px;">
   			 					<span>${two.name }</span>
   			 				</a>
   			 			</div>
   					</c:forEach>
   					<c:if test="${one.name=='个人管理'}">
   						<div style="padding:3px 0;">
   			 				<a href="javascript:openTab('修改密码','user_repwdManage.action','icon-user')" class="easyui-linkbutton"  data-options="iconCls:'icon-edit',plain:true" >修改密码</a>
   			 			</div>
   					</c:if>
   				</div>
   			</c:forEach>
   		</div>
   	</div>
   	
   	<!-- 中部的布局 ：页面-->
   	<div data-options="region:'center',split:true" style="height: auto;width: auto;">
   		<div class="easyui-tabs" data-options="fit:true,border:false" id="tabs">
            <div title="欢迎页" style="padding:20px;">   
                <div style="margin-top:20px;">  
                    <h3>你好，OA办公自动化管理系统</h3>  
                </div>  
            </div>  
        </div>
   	</div>
   	
   	<!-- 东部的布局：通知公告 -->
   	<div data-options="region:'east',split:true,iconCls:'icon-report'" title="通知公告" style="width: 150px;">
   		<div class="easyui-accordion" data-options="fit:'true'" style="height: auto;">
   			 <div title="通知" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
   			 	<c:if test="${notifySize!=0}" >
   			 		<a href="javascript:openTab('${notify.notify }','saveoffice!saveofficeManage.action','icon-user')"  class="easyui-linkbutton"  data-options="plain:true,iconCls:'icon-manage'" style="width: 150px;">
   			 			<span>你的消息通知列表</span>
   			 		</a>
   			 	</c:if>
   			 	<!--<c:forEach items="${userNotify}" var="notify" varStatus="state">
   						<div style="padding:3px 0;">
   			 				<a href="javascript:openTab('${notify.notify }','saveoffice!saveofficeManage.action','icon-user')"  class="easyui-linkbutton"  data-options="plain:true,iconCls:'icon-manage'" style="width: 150px;">
   			 					<span>${notify.notify }</span>
   			 				</a>
   			 			</div>
   				</c:forEach>
   			 -->
   			 </div>
   			 <div title="公告" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
   			 	${notice.notice }
   			 </div>
   			
   		</div>
   	</div>
   	
  <!--  	南部的布局 ：页底-->
   	<div data-options="region:'south',split:false" style="height: 30px;background-color: #E7F0FF" >
   		<div align="center">
   			版权所有：vovh<br>
   		</div>
   	</div>
   	
  </body>
</html>
